.login {
  width: 100%;
  height: 100%;
  position: relative;
  background: #202020;
  .login-form {
    width: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    .login-form-left {
      display: inline-block;
      vertical-align: middle;
      width: 340px;
      .login-form-title {
        display: block;
        width: 100%;
        img {
          width: 100%;
        }
      }
      .login-form-box {
        .login-form-input {
          width: 280px;
          display: inline-block;
          vertical-align: middle;
        }
        .login-form-btn {
          display: inline-block;
          vertical-align: middle;
          text-align: center;
          .form-btn {
            background: #f5f5f5;
            color: #202020;
            margin-left: 10px;
            &:hover {
              background: #202020;
              color: #f5f5f5;
              border: 1px solid #f5f5f5;
            }
            &:active {
              background: #f5f5f5;
              color: #202020;
              border: 1px solid #f5f5f5;
            }
          }
        }
      }
    }
    .login-form-img {
      display: inline-block;
      vertical-align: middle;
      margin-left: 40px;
      img {
        display: block;
        width: 150px;
        height: 150px;
        animation: respire 10s ease-in Infinite;
        border-radius: 50%;
      }
    }
  }
}

@keyframes respire {
  0% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1.2);
  }
}
